<template>
    <div>
        <el-page-header @back="$router.back(-1)" :content="title"></el-page-header>

        <el-form style="margin-top:10px;width:1000px;" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="酒店名称" prop="h_name">
                <el-input v-model="ruleForm.h_name"></el-input>
            </el-form-item>

            <el-form-item label="酒店图片" prop="h_icon">
                <el-upload
                  class="avatar-uploader"
                  :action="url"
                  :show-file-list="false"
                  :on-success="success"
                  :before-upload="beforeUpload">
                  <img v-if="ruleForm.h_icon" :src="ruleForm.h_icon" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

            <el-form-item label="酒店均价" prop="h_money">
                <el-row>
                    <el-col :span="6">
                        <el-input v-model="ruleForm.h_money"></el-input>
                    </el-col>

                    <el-col :span="3">
                        　元/晚
                    </el-col>
                    
                </el-row>
                
            </el-form-item>

            <el-form-item label="房间类型">
                <el-button type="primary" @click="addRoom">添加类型</el-button>
            </el-form-item>

            <el-form-item>
                <el-row style="margin-bottom:10px;" v-for="(v,k) in ruleForm.h_room" :key="k">
                    <el-col :span="5">
                        <el-input v-model="v.name" placeholder="请输入房间名称"></el-input>
                    </el-col>

                    <el-col :span="1">
                        　:
                    </el-col>
                    
                    <el-col :span="5">
                        <el-input v-model="v.pric" placeholder="请输入房间价格"></el-input>
                    </el-col>
                    <el-col :span="1">
                        　元
                    </el-col>
                </el-row>
                
            </el-form-item>

            <el-form-item label="酒店地址" prop="h_areaId">
  	            <el-cascader
                    ref="myarea"
		            :options="options"
		            :change-on-select="true"
		            v-model="ruleForm.h_areaId"
		            expand-trigger="hover"
		            @change="handleChange" >
	            </el-cascader>
            </el-form-item>

            <el-form-item label="详细地址" prop="h_address">
                <el-input type="textarea" v-model="ruleForm.h_address"></el-input>
            </el-form-item>

            <el-form-item >
                <el-button @click="submit('ruleForm')" type="primary">提交</el-button>
            </el-form-item>

        </el-form>

    </div>
</template>


<script>

import area from '../../js/area.js'

export default {
    data(){

        return {
            title: '添加酒店',
            options: area,
            ruleForm: {
                h_id: null,
                h_name: '',
                h_icon: '',
                h_money: '',
                h_address: '',
                h_areaId:null,
                h_areaText:[],
                h_room:[]
            },
            rules: {
                h_name:[
                    {required:true,message:'请输入酒店名称', trigger: 'blur'}
                ],
                h_icon:[
                    {required:true,message:'请上传酒店图片', trigger: 'change'}
                ],
                h_money:[
                    {required:true,message:'请输入酒店金额',trigger:'blur'}
                ],
                h_address:[
                    {required:true,message:'请输入详细地址',trigger:'blur'}
                ],
                h_areaId:[
                    {required:true,message:'请选择酒店地址',trigger:'change'}
                ]
            },
            url: '',
            loading: false,
            status: false
        }

    },
    methods:{
        handleChange(res){
            this.ruleForm.h_areaText = this.$refs.myarea.getCheckedNodes()[0].pathLabels
        },
        success(res,file){

            this.loading = false

            if(res.code==1){
                
                this.ruleForm.h_icon = res.src

            }else{

                this.$message.error(res.msg)

            }

            console.log(res)

            console.log(file)
        },
        beforeUpload(file){
            if(this.loading){

                return false

            }

            let type = ['image/jpeg','image/png','image/jpg'].indexOf(file.type);

            if (type==-1) {
                this.$message.error('上传头像图片只能是 JPG、PNG 格式!');

                type = false
            }

            this.loading = true

            return type
        },
        addRoom(){
            this.ruleForm.h_room.push({name:'',pric:null})
        },
        submit(formName){

            if(this.status){

                return false

            }

            this.$refs[formName].validate((valid) => {
          if (valid) {

            this.status = true

            let that = this
            
            this.$axios.post('/admin.php/hotel/edit_save',this.$qs.stringify(this.ruleForm)).then( (res) => {
                
                that.status = false

                if(res.data.code==1){

                    that.$message({
                        showClose: true,
                        message: '提交成功~',
                        type: 'success'
                    });

                    that.$router.push({path:'/admin/hotel'})


                }else{
                    
                    that.$message.error(res.data.msg)

                }

            } ).catch( (err) => {

                that.status = false

                that.$message.error('网络繁忙~')

            } )

          } else {
            return false;
          }
        });

        },
        getData(){

            let that =this

            this.$axios.post('/admin.php/hotel/edit',this.$qs.stringify({id:this.ruleForm.h_id})).then( (res) => {

                if(res.data.code==1){

                    that.ruleForm = res.data.data

                }

            } ).catch( (err) => {

                that.$message.error('网络繁忙~')

            } )

        }
    },
    created(){

        this.url = process.env.API_ROOT+'/upload'

        this.ruleForm.h_id = this.$route.query.id

        if(this.ruleForm.h_id){

            this.getData()

            this.title = '编辑酒店'
        }

    }
}
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border:1px dashed #cccccc;
  }
  .avatar-uploader-icon:hover{
      border-color: #409EFF;
      color:#409EFF;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>